<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi"
          name="viewport">
    <link rel="stylesheet" type="text/css" href="/css/reset.css">
    <link rel="stylesheet" type="text/css" href="/css/weichat.css">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="/css/style.css">
    <link rel="stylesheet" href="/js/plugins/bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <script src="/js/plugins/jquery/jquery.min.js"></script>
    <link rel="stylesheet" href="/css/font/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="/css/reset.css"/>
    <link rel="stylesheet" href="/css/myProfiles.css"/>
    <script src="/js/plugins/jrender/jrender.min.js"></script>
    <script src="/js/plugins/form/jquery.form.js"></script>
    <link rel="stylesheet" href="/js/plugins/dialog2/dialog.css">
    <script src="/js/plugins/dialog2/dialog.min.js"></script>
    <title>螺窝窝零钱提现</title>
    <script>
        $(function () {
            //获取当前登录的用户
            var user = JSON.parse(sessionStorage.getItem("user"));
            console.log(user);
            $(".echoBnts").renderValues(user);
            //
            var bankcardId;
            //获取当前用户的银行卡信息
            $.get("/bankcards/" + user.id, function (data) {
                bankcardId = data[0].id;
                console.log(bankcardId);
                $(".echoBnt").renderValues(data[0]);
            })
            //提现到银行卡
            $("#registerForm input[name='id']").val(user.id);
            //设置跳转
            $(".getoutBnt").click(function () {
                $("#registerForm").ajaxSubmit(function (data) {
                    sessionStorage.setItem("user", JSON.stringify(data.result));
                    if (data.success) {
                        $(document).dialog({
                            type: 'confirm',
                            style: 'IOS',
                            titleShow: false,
                            content: '提现成功!',
                            buttons: [
                                {
                                    name: '返回到我的余额',
                                    callback: function () {
                                        //跳转
                                        window.location.href = "/mine/pursebalance.html";
                                    }
                                },
                                {
                                    name: '继续提现',
                                    callback: function () {
                                        //跳转
                                        window.location.href = "/mine/tixian.html";
                                    }
                                }
                            ]
                        });
                    } else {
                        $(document).dialog({
                            titleShow: false,
                            content: data.msg
                        });
                    }
                })
            })
        })
    </script>
</head>
<body>
<div class="wrap">
    <header class="top-bar" id="header">
        <div class="goback"><a href="pursebalance.html"><img src="/img/fh.png"></a></div>
        <h1>零钱提现</h1>
    </header>
    <div class="tixian-box">
        <div class="tobank echoBnt">
            <div render-pool="list">
                <span class="dzyh">到帐银行卡</span>
                <span class="yhk" render-html="cardname"></span>
                <span class="dz">1秒内到帐</span>
            </div>
        </div>
        <form action="/bankcards" method="post" class="form-signin" id="registerForm">
            <input type="hidden" name="_method" value="PUT">
            <input type="hidden" name="id">
            <div class="t-moneys echoBnts">
                <span class="txje">提现金额</span>
                <span class="rmb">￥</span>
                <!-- render-value="balance"-->
                <span class="kyye">当前零钱余额:***;<a href="javascript:;" id="getall">全部提现</a></span>
                <input type="text" id="getmoneys" name="balance" class="t-input">
                <a href="#" class="getoutBnt">
                    <button type="button" id="getout">提现</button>
                </a>
                </a>
            </div>
        </form>
    </div>
</div>
<script>
    window.onload = function () {
        var okyMOneys = 25542.6;//模拟可用余额,实际使用的时候从数据库返回或其它的操作。
        var oGetAll = document.getElementById("getall");
        var oGetMoneys = document.getElementById("getmoneys");
        var oGetOut = document.getElementById("getout");
        var oKyye = document.getElementsByClassName("kyye")[0];

        oGetMoneys.oninput = function ()//监听用户的输入给出相应提示。
        {
            if (oGetMoneys.value == "") {
                oGetOut.style.opacity = 0.4;
                oKyye.innerHTML = "当前零钱余额：25546.60元，<a href='javascript:;'' id='getall'>全部提现</a>"
            }
            else if (parseFloat(oGetMoneys.value) > okyMOneys) {
                oGetOut.style.opacity = 0.4;
                oKyye.innerHTML = "<font color=red>输入金额超过零钱余额</font>"
            }
            else {
                var paroGetMoneys = parseFloat(oGetMoneys.value);
                var sxf = paroGetMoneys * 0.001;
                var sjdz = paroGetMoneys - sxf;
                //oGetMoneys.value=sjdz.toFixed(2);
                oKyye.innerHTML = "额外扣除￥" + sxf.toFixed(2) + "手续费（费率0.1%）";
                oGetOut.style.opacity = 1;
                //这里就可以进行与后台交互的操作比如ajax操作等。
            }
        };
        //全部提现
        oGetAll.onclick = function () {
            var parGetMoneys = parseFloat(oGetMoneys.value);//格式化成数字
            var sjdz = okyMOneys - (okyMOneys * 0.001);//手费0.1%
            var sxf = okyMOneys * 0.001;
            oGetMoneys.value = sjdz.toFixed(2);
            oKyye.innerHTML = "额外扣除￥" + sxf.toFixed(2) + "手续费（费率0.1%）";
            //alert("a");
        };
    };
</script>
</body>
</html>